<template>
	<view>
		<view class="beijing ">
			<dsl-navbar :bgTopImg='bgTopImg' title="个人中心" :textTitle='textTitle' :backBg="titleRightStyle"></dsl-navbar>
			<view class="row padding-right justify-between align-center margin-top margin-left" @click="goPeoplePage">
				<view style="width: 400rpx;" class="flex align-center ">
					<image class="headImg" :src="isUserLogin?userInfo.avatar:'/static/user/userImg.png'"
						mode="aspectFill">
					</image>
					<view class="crow ml20">
						<view class="fs30 cfff one_overflow" style="width: 240rpx;">
							{{isUserLogin?userInfo.userName:'请登录'}}
						</view>
						<view class="fs24 mt15 align-center cfff" v-if="userInfo.captain == 1">
							<text> 身份：{{'团长'}}</text>
							<image src="../../static/user/icon_tuanzhang.png" mode=""
								style="width: 30rpx;height: 30rpx;" class="margin-left-xs"></image>
						</view>
						<!-- vip {{isUserLogin?userInfo.vip:'0'}} -->
					</view>
				</view>
				<image src="/static/icon_shezhi.png" mode="" style="width: 40rpx;height: 40rpx;"
					@click.stop="$tools.push('/pages/user/modules/setting')"></image>
			</view>
		</view>
	<!-- 	<view class="rowjc margin-top" style="margin-top: 100rpx;">
			<view class="wallet crowjb">
				<view>
					<view style="padding: 20rpx;" class="rowjbic">
						<view class="fs28 c333">我的钱包</view>
						<view class="align-center">
						</view>
					</view>
					<view class="crowic">
						<view class="line"></view>
					</view>
				</view>
				<view class="crowic">
					<view class="fs50 c000 fwb">￥{{userInfo.money || '0.00'}}</view>
				</view>
				<view class="crowic">
				</view>
			</view>
		</view> -->

		<view class="crowic mt20" style="margin-top: -50rpx;">
			<view class="classfity">
				<view class="oneRow rowjbic" @click="goInfoPage('1')">
					<view class="rowic">
						<image class="oneRowImg " src="/static/img/icon_tianjia.png" mode=""></image>
						<view class="fs28 c333 ml20">添加出行人</view>
					</view>
					<image class="jiantouImg" src="/static/img/imgjiantou-1.png" mode=""></image>
				</view>
				<view class="oneRow rowjbic" @click="goInfoPage('2')">
					<view class="rowic">
						<image class="oneRowImg " src="/static/img/icon_jinji.png" mode=""></image>
						<view class="fs28 c333 ml20">紧急联系人</view>
					</view>
					<image class="jiantouImg" src="/static/img/imgjiantou-1.png" mode=""></image>
				</view>
			<!-- 	<view class="oneRow rowjbic" @click="goInfoPage('3')">
					<view class="rowic">
						<image class="oneRowImg " src="/static/img/icon_xuanzetunzha.png" mode=""></image>
						<view class="fs28 c333 ml20">选择团长</view>
					</view>
					<image class="jiantouImg" src="/static/img/imgjiantou-1.png" mode=""></image>
				</view> -->
				<view class="oneRow rowjbic" @click="goInfoPage('8')">
					<view class="rowic">
						<image class="oneRowImg " src="/static/img/icon_xuanzetunzha.png" mode=""></image>
						<view class="fs28 c333 ml20">申请团长</view>
					</view>
					<image class="jiantouImg" src="/static/img/imgjiantou-1.png" mode=""></image>
				</view>
				<view class="oneRow rowjbic" @click="goInfoPage('9')">
					<view class="rowic">
						<image class="oneRowImg " src="/static/img/icon_xuanzetunzha.png" mode=""></image>
						<view class="fs28 c333 ml20">团长中心</view>
					</view>
					<image class="jiantouImg" src="/static/img/imgjiantou-1.png" mode=""></image>
				</view>
				<view class="oneRow rowjbic" @click="goInfoPage('10')">
					<view class="rowic">
						<image class="oneRowImg " src="/static/img/icon_xuanzetunzha.png" mode=""></image>
						<view class="fs28 c333 ml20">申请区代理</view>
					</view>
					<image class="jiantouImg" src="/static/img/imgjiantou-1.png" mode=""></image>
				</view>
				<view class="oneRow rowjbic" @click="goInfoPage('11')">
					<view class="rowic">
						<image class="oneRowImg " src="/static/img/icon_xuanzetunzha.png" mode=""></image>
						<view class="fs28 c333 ml20">代理收入统计</view>
					</view>
					<image class="jiantouImg" src="/static/img/imgjiantou-1.png" mode=""></image>
				</view>
			<!-- 	<view class="oneRow rowjbic" @click="goInfoPage('4')">
					<view class="rowic">
						<image class="oneRowImg " src="/static/img/icon_kaifapiao.png" mode=""></image>
						<view class="fs28 c333 ml20">开具发票</view>
					</view>
					<image class="jiantouImg" src="/static/img/imgjiantou-1.png" mode=""></image>
				</view> -->
				<view class="oneRow rowjbic" @click="goInfoPage('5')">
					<view class="rowic">
						<image class="oneRowImg " src="/static/img/icon_tuiguang.png" mode=""></image>
						<view class="fs28 c333 ml20">推广海报</view>
					</view>
					<image class="jiantouImg" src="/static/img/imgjiantou-1.png" mode=""></image>
				</view>
				<view class="oneRow rowjbic" @click="goInfoPage('6')">
					<view class="rowic">
						<image class="oneRowImg " src="/static/img/icon_goumaixuzhi.png" mode=""></image>
						<view class="fs28 c333 ml20">购买须知</view>
					</view>
					<image class="jiantouImg" src="/static/img/imgjiantou-1.png" mode=""></image>
				</view>
				<view class="oneRow rowjbic" @click="goInfoPage('7')">
					<view class="rowic">
						<image class="oneRowImg " src="/static/img/icon_lianx.png" mode=""></image>
						<view class="fs28 c333 ml20">联系我们</view>
					</view>
					<image class="jiantouImg" src="/static/img/imgjiantou-1.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/common/path.js'
	export default {
		data() {
			return {
				userInfo: {},
				isUserLogin: false, //已登录

				//顶部导航
				bgTopImg: 'rgba(255, 255, 255, 0.0)',
				textTitle: '#FFFFFF',
				titleRightStyle: '#FFFFFF',
			}
		},
		onShow() {
			uni.setStorageSync('mpShareTitle','芒果乐游团')
			this.getUserInfo()

		},
		methods: {
			//获取用户信息
			getUserInfo() {

				let data = {
					id: uni.getStorageSync('userInfo').id
				}
				// console.log('[传参]', data);
				this.Http.POST(getUserInfo, data)
					.then((res) => {
						// console.log('[用户信息]', res);
						if (res.code == 0) {
							this.userInfo = res.data
							uni.setStorageSync('userInfo', res.data)
							this.isUserLogin = true
						} else {
							this.isUserLogin = false
							if (!this.isUserLogin) {
								uni.showModal({
									title: '温馨提示',
									content: '您目前暂未登录，请先登录',
									success: function(Res) {
										if (Res.confirm) {
											uni.navigateTo({
												url: '../wxLogin/wxLogon'
											})
										} else if (Res.cancel) {
											console.log('用户点击取消');
										}
									},
								})
							}
						}
					})
			},
			//滑动完成后触发
			onPageScroll(event) {
				// console.log(event.scrollTop);
				let backImg
				if (event) {
					backImg = `rgba(255, 255, 255, ${(event.scrollTop-100)/20})`
					if ((event.scrollTop - 100) / 20 > 0.3) {
						this.textTitle = 'gray'
						this.titleRightStyle = 'gray'
					} else if ((event.scrollTop - 100) / 20 > 0.7) {
						this.textTitle = '#000000'
						this.titleRightStyle = '#000000'
					} else {
						this.textTitle = '#FFFFFF'
						this.titleRightStyle = '#FFFFFF'
					}
					// console.log('多少',backImg);
				} else {
					backImg = `rgba(255, 255, 255, ${(event.scrollTop-100)/20})`
				}
				this.bgTopImg = backImg;
			},
			//登录跳转
			goPeoplePage() {
				if (!this.isUserLogin) { //未登录
					this.$tools.push('/pages/wxLogin/wxLogon')
				} else {
					this.$tools.push('/pages/user/modules/userInfo')
				}
			},
			//功能列表跳转
			goInfoPage(index) {
				if (!this.isUserLogin) {
					uni.showModal({
						title: '温馨提示',
						content: '您目前暂未登录，请先登录'
					})
					return
				}
				if (index == 1) { //添加出行人
					uni.navigateTo({
						url: "/pages/address/index"
					})
				}
				if (index == 2) { //紧急联系人
					uni.navigateTo({
						url: "/pages/user/modules/urgencyList"
					})
				}
				if (index == 3) { //选择团长
					uni.navigateTo({
						url: "/pages/user/team/regimentalSelect"
					})
				}
				if (index == 4) { //开具发票
					uni.navigateTo({
						url: "/pages/my/classfity/kaijufapiao/kaijufapiao"
					})
				}
				if (index == 5) {
					uni.navigateTo({
						url: '../plugins/richText?title=推广海报&type=4'
					})
				}
				if (index == 6) {
					uni.navigateTo({
						url: '../plugins/richText?title=购买须知&type=5'
					})
				}
				if (index == 7) { //打电话
					uni.makePhoneCall({
						phoneNumber: '15563749727'
					})
				}
				if (index == 8) { //申请团长
					if (this.userInfo.captain  != 0) {
						let _this = this
						uni.showModal({
							title: '温馨提示',
							content: '不可重复提交申请',
							success: function(Res) {
								if (Res.confirm) {} else if (Res.cancel) {}
							}
						})
					}
					uni.navigateTo({
						url: '/pages/user/team/regimentalForm'
					})
				}
				if (index == 9) { //团长中心
					uni.navigateTo({
						url: '/pages/user/team/index'
					})
				}
				if (index == 10) { //申请加盟商
				if (this.userInfo.agent  != 0) {
					let _this = this
					uni.showModal({
						title: '温馨提示',
						content: '不可重复提交申请',
						success: function(Res) {
							if (Res.confirm) {} else if (Res.cancel) {}
						}
					})
				}
					uni.navigateTo({
						url: 'modules/agency/agencyForm'
					})
				}
				if (index == 11) { //代理收入统计
					uni.navigateTo({
						url: 'modules/agency/agencyIncome'
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F1F1F1;
	}

	.beijing {
		width: 750rpx;
		height: 387rpx;
		background: #4284DB;
		/* fallback for old browsers */
		background: -webkit-linear-gradient(to right, #29EAC4, #4284DB);
		/* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to right, #29EAC4, #4284DB);
		/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		border-radius: 0 0 15% 15%;
		box-sizing: border-box;
	}

	.headImg {
		width: 88rpx;
		height: 88rpx;
		background-color: #eee;
		border-radius: 50%;
	}

	.wallet {
		padding-bottom: 30rpx;
		box-sizing: border-box;
		width: 710rpx;
		height: 300rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: -150rpx;
	}

	.classfity {
		width: 710rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 20rpx 20rpx 0rpx;
		box-sizing: border-box;
	}

	.line {
		width: 650rpx;
		height: 1rpx;
		background-color: #EEEEEE;
	}

	.chongzhi {
		height: 60rpx;
		width: 120rpx;
		background-color: #29EAC4;
		font-size: 32rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 30rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.oneRow {
		height: 88rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.oneRowImg {
		width: 40rpx;
		height: 40rpx;
	}

	.jiantouImg {
		width: 15rpx;
		height: 20rpx;
	}
</style>
